<template>
  <div class="bg-weather-secondary">
    你正在预览{{ cityName }}的天气信息
    <span>，可以通过右上角的"+"号按钮保存起来</span>
  </div>
  <div class="today-info">
    <h1>当日气温是：{{ weatherInfoLive.temperature }}摄氏度</h1>
    <h1>当日天气是：{{ weatherInfoLive.weather }}</h1>
    <h1>当日风向是：{{ weatherInfoLive.winddirection }}风</h1>
    <h1>当日风力是：{{ weatherInfoLive.windpower }}级</h1>
    <hr class="hr" />
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
const props = defineProps({
  cityAdcode: {
    type: String,
    default: '',
  },
  cityName: {
    type: String,
    default: '',
  },
})
const cityObj = computed(() => {
  return {
    city: props.cityAdcode,
  }
})
console.log(cityObj.value)

const weatherData = ref('')
const weatherInfoLive = ref('')

//查询当日天气信息
import { getWeatherByAdcodeLive} from '@/api/index'

onMounted(async () => {
  weatherData.value = await getWeatherByAdcodeLive(cityObj.value)
  // console.log(weatherData.value)
  weatherInfoLive.value = weatherData.value.lives[0]
  // console.log(weatherInfoLive.value)
  
 
})
</script>

<style lang="scss" scoped>
.bg-weather-secondary {
  text-align: center;
  padding: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(0 78 113 / var(--tw-bg-opacity));
}

.today-info {
  text-align: center;
  gap: 1rem;
  flex-direction: column;
  display: flex;
  margin-top: 1.5rem;
  max-width: 1536px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10rem;
  padding-left: 10rem;
  h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  .hr {
    --tw-border-opacity: 0.1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity));
    margin-top: 1.5rem;
    margin: 0;
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
}
</style>
